<template>
  <div class="flowDialog">
    <el-dialog
        fullscreen
        :visible.sync="dialogController"
        width="60%"
        :before-close="handleClose"
    >
      <div class="flex-app-continer1" style="overflow: auto">
        <div class="info">
          <div style="text-align:center;font-size: 36px !important;color: #bb8c91">
            {{ invoicingSpectShow ? '开具专票' : '开具普票' }}
          </div>
          <div class="info-top">
            <div class="info-top-l">
              <div v-if="invoicingPlainShow" style=" display: inline-block; align-items: center; ">
                <div
                    class="radio-tit"
                    style="width: 150px; margin-right: 0; display: inline-block; "
                >
                  购买方是否为自然人：
                </div>
                <el-select
                    v-model="infoFormData.gmfsfwzrr"
                    placeholder="请选择"
                    size="small"
                    style="width: 200px"
                >
                  <el-option
                      v-for="(lab, val) in gmfsfwzrrList"
                      :key="lab"
                      :label="lab"
                      :value="val"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="info-top-r">
              <div style="margin-left: 12px; margin-top: 4px; display: inline-block; ">
                <vxe-button
                    status="primary"
                    title="展开非必填信息"
                    icon="fa fa-angle-down"
                    @click="showInfo()"
                    style="height: 32px"
                    v-if="!ifShowInfo"
                >
                  展开非必填信息
                </vxe-button>
                <vxe-button
                    status="primary"
                    title="收起非必填信息"
                    style="height: 32px"
                    icon="fa fa-angle-up"
                    @click="hideInfo()"
                    v-else
                >
                  收起非必填信息
                </vxe-button>
              </div>
            </div>
          </div>
          <!-- 展开信息模块 -->
          <vxe-form
              :data="extendFormData"
              ref="searchForm"
              size="mini"
              title-align="right"
              title-width="200"
              style="width: 100%"
              v-show="ifShowInfo"
          >
            <vxe-form-item>
              <template v-slot>
                <div class="form-tit">业务信息</div>
              </template>
            </vxe-form-item>
            <vxe-form-item
                title="增值税即征即退代码："
                :item-render="{}"
            >
              <template v-slot>
                <vxe-select
                    v-model="extendFormData.zzsjzjtdm"
                    :placeholder="
                                        from == 'look' ? '' : '请选择'
                                    "
                    style="width: 220px"
                    clearable
                    :disabled="from == 'red' || from == 'look'"
                >
                  <vxe-option
                      v-for="(item, index) in zzsjzjtDmList"
                      :key="index"
                      :value="item.statusType"
                      :label="item.statusName"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item
                title="收购发票类型代码："
                field="sgfplxdm"
                :item-render="{}"
            >
              <template v-slot>
                <vxe-select
                    v-model="extendFormData.sgfplxdm"
                    :placeholder="
                                        from == 'look' ? '' : '请选择'
                                    "
                    style="width: 220px"
                    clearable
                    :disabled="from == 'red' || from == 'look'"
                >
                  <vxe-option
                      v-for="(item, index) in sgfplxDmList"
                      :key="index"
                      :value="item.statusType"
                      :label="item.statusName"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item
                title="出口业务适用政策代码："
                field="ckywsyzcdm"
                :item-render="{}"
            >
              <template v-slot>
                <vxe-select
                    v-model="extendFormData.ckywsyzcdm"
                    :placeholder="
                                        from == 'look' ? '' : '请选择'
                                    "
                    style="width: 220px"
                    clearable
                    :disabled="from == 'red' || from == 'look'"
                >
                  <vxe-option
                      v-for="(item, index) in ckywsyzcDmList"
                      :key="index"
                      :value="item.statusType"
                      :label="item.statusName"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item>
              <template v-slot>
                <div class="form-tit">购买方</div>
              </template>
            </vxe-form-item>

            <vxe-form-item title="购买方地址：" field="gmfdz">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.gmfdz"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="300"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="购买方电话：" field="gmfdh">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.gmfdh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="60"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="购买方账号：" field="gmfzh">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.gmfzh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="100"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="购买方开户行：" field="gmfkhh">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.gmfkhh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="120"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item
                title="购买方经办人姓名："
                field="gmfjbr"
            >
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.gmfjbr"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="150"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item
                title="购买方经办人证件号码："
                field="jbrsfzjhm"
            >
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.jbrsfzjhm"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="30"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item
                title="购买方经办人联系电话："
                field="gmfjbrlxdh"
            >
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.gmfjbrlxdh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="60"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item>
              <template v-slot>
                <div class="form-tit">销售方</div>
              </template>
            </vxe-form-item>

            <vxe-form-item title="销售方地址：" field="xsfdz">
              <template v-slot>
                <vxe-input
                    v-model="disabledEditForm.xsfdz"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="26"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item title="销售方电话：" field="xsfdh">
              <template v-slot>
                <vxe-input
                    v-model="disabledEditForm.xsfdh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="26"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item title="销售方账号：" field="xsfzh">
              <template v-slot>
                <vxe-input
                    v-model="disabledEditForm.xsfzh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="26"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item title="销售方开户行：" field="xsfkhh">
              <template v-slot>
                <vxe-input
                    v-model="disabledEditForm.xsfkhh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="26"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item>
              <template v-slot>
                <div class="form-tit">收款信息</div>
              </template>
            </vxe-form-item>

            <vxe-form-item title="收款银行名称：" field="skyhmc">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.skyhmc"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="120"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item title="收款银行账号：" field="skyhzh">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.skyhzh"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    maxlength="100"
                    style="width: 220px"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="结算方式：" field="jsfs">
              <template v-slot>
                <vxe-select
                    v-model="extendFormData.jsfs"
                    :placeholder="
                                        from == 'look' ? '' : '请选择'
                                    "
                    style="width: 220px"
                    clearable
                    :disabled="from == 'red' || from == 'look'"
                >
                  <vxe-option
                      v-for="(item, index) in jsfsList"
                      :key="index"
                      :value="item.statusType"
                      :label="item.statusName"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>

            <vxe-form-item>
              <template v-slot>
                <div class="form-tit">开票人信息</div>
              </template>
            </vxe-form-item>
            <vxe-form-item title="开票人证件号码：" field="kprzjhm">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.kprzjhm"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    style="width: 220px"
                    clearable
                    maxlength="18"
                    @change="isCard(extendFormData.kprzjhm)"
                    :disabled="from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="开票人证件类型：" field="kprzjlx">
              <template v-slot>
                <vxe-select
                    v-model="extendFormData.kprzjlx"
                    :placeholder="
                                        from == 'look' ? '' : '请选择'
                                    "
                    style="width: 220px"
                    clearable
                    :disabled="from == 'red' || from == 'look'"
                >
                  <vxe-option
                      v-for="(item, index) in kprzjlxOption"
                      :key="index"
                      :value="item.statusType"
                      :label="item.statusName"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item>
              <template v-slot>
                <div class="form-tit">其他信息</div>
              </template>
            </vxe-form-item>
            <vxe-form-item title="区域代码：" field="qydm">
              <template v-slot>
                <vxe-input
                    v-model="disabledEditForm.qydm"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    style="width: 220px"
                    maxlength="26"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="应税行为发生地：" field="ysxwfsd">
              <template v-slot>
                <vxe-input
                    v-model="extendFormData.ysxwfsd"
                    :placeholder="
                                        from == 'look' ? '' : '请输入'
                                    "
                    clearable
                    style="width: 220px"
                    maxlength="11"
                    :disabled="from == 'red' || from == 'look'"
                ></vxe-input>
              </template>
            </vxe-form-item>
          </vxe-form>
          <!-- 展开模块下面的列表 -->
          <vxe-button
              v-show="ifShowInfo"
              status="primary"
              type="text"
              title="增加"
              icon="fa fa-plus-square-o"
              @click="addFjys()"
          >
            增加特定要素
          </vxe-button>
          <vxe-table
              header-align="center"
              border
              :auto-resize="true"
              :sync-resize="true"
              ref="xTable2"
              :data="fjysList"
              v-show="ifShowInfo"
              :edit-config="{
                            trigger: 'manual',
                            mode: 'row',
                            showStatus: true,
                        }"
              class="fj-area"
          >
            <vxe-column
                field="fjysmc"
                title="附加要素名称"
                align="center"
                :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                    v-model="row.fjysmc"
                    type="text"
                    maxlength="200"
                    :disabled="from == 'look'"
                ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column
                field="fjyslx"
                title="附加要素类型"
                align="center"
                :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                    v-model="row.fjyslx"
                    type="text"
                    maxlength="200"
                    :disabled="from == 'look'"
                ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column
                field="fjysz"
                title="附加要素值"
                align="center"
                :edit-render="{}"
            >
              <template #edit="{ row }">
                <vxe-input
                    v-model="row.fjysz"
                    type="text"
                    maxlength="200"
                    :disabled="from == 'look'"
                ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column
                title="操作"
                align="center"
                v-if="from != 'look'"
            >
              <template v-slot="scope">
                <vxe-button
                    status="primary"
                    type="text"
                    title="删除"
                    icon="fa fa-minus-square-o"
                    @click="delFjys(scope.row)"
                >
                  删除
                </vxe-button>
                <vxe-button
                    status="primary"
                    type="text"
                    title="编辑"
                    icon="fa fa-minus-square-o"
                    @click="editFjys(scope.row)"
                >
                  编辑
                </vxe-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>

        <!-- 整体发票区域 -->
        <div class="invoice-area">
          <div class="box1">
            <span class="bar-tit">购买方信息</span>
          </div>
          <div class="box2">
            <div class="flex-invoice">
              <span class="item-tit">名称：</span>
              <vxe-input
                  v-model="infoFormData.gmfmc"
                  :placeholder="from == 'look' ? '' : '请输入'"
                  clearable
                  maxlength="300"
                  class="input"
                  :disabled="from == 'look' || from == 'red'"
              ></vxe-input>
              <i class="vxe-icon--search" style="cursor:pointer;margin-left: 6px;" @click="showInvoiceName"></i>
            </div>
            <div class="flex-invoice">
              <div class="item-tit">
                纳税人识别号：
              </div>
              <vxe-input
                  v-model="infoFormData.gmfnsrsbh"
                  :disabled="invoicingPlainShow ? false: true"
                  maxlength="20"
                  class="input"
              ></vxe-input>
            </div>
          </div>
          <div class="box3">
            <span class="bar-tit">销售方信息</span>
          </div>
          <div class="box4">
            <div class="flex-invoice">
              <span class="item-tit">名称：</span>
              <vxe-input
                  v-model="disabledEditForm.xsfmc"
                  placeholder="请输入"
                  clearable
                  maxlength="300"
                  class="input"
                  disabled
              ></vxe-input>
            </div>
            <div class="flex-invoice">
              <div class="item-tit">
                纳税人识别号：
              </div>
              <vxe-input
                  v-model="disabledEditForm.xsfnsrsbh"
                  placeholder="请输入"
                  clearable
                  maxlength="300"
                  class="input"
                  disabled
              ></vxe-input>
            </div>
          </div>
          <div class="box5">
            <!-- <div
            style="white-space:nowrap"
        >
                <div class="worldBlueBtn" style="margin-left: 12px;height: 20px;"  @click="insertOneEvent()">
                    新增行
                </div>
                <div class="worldBlueBtn" style="height: 20px;"   @click="removeEvent()">
                    删除行
                </div>
        </div> -->
            <div class="table-area-invoice">
              <vxe-table
                  :data="tableData"
                  ref="xTable"
                  border="none"
                  show-overflow
                  auto-resize
                  resizable
                  style="overflow: auto; width: 100%"
                  height="240"
                  :edit-config="{
                                    trigger: 'click',
                                    mode: 'row',
                                    showIcon: false,
                                    activeMethod: activeRowMethod,
                                }"
                  @edit-actived="editActivedEvent"
                  @checkbox-change="selectChangeEvent"
                  @cell-click="cellClickEvent"
                  :row-class-name="rowClassName"
                  :cell-style="tableCellStyle"
                  show-footer
                  :footer-cell-class-name="footerCellClassName"
                  :footer-method="footerMethod"
              >
                <vxe-column
                    type="checkbox"
                    width="60"
                ></vxe-column>
                <vxe-column
                    field="mxxh"
                    title="序号"
                    type="html"
                    width="60">

                </vxe-column>
                <vxe-column
                    field="xmmc"
                    title="项目名称"
                    type="html"
                    width="150"
                >
                  <template v-slot="{ row }">
                    <el-select v-model="row.xmmc" placeholder="请选择">
                      <el-option
                          v-for="item in row.xmmcList"
                          :key="item"
                          :label="item"
                          :value="item">
                      </el-option>
                    </el-select>
                    <!-- <el-button
                        size="small"
                        v-if="
                            from != 'look' &&
                            from != 'red'
                        "
                    >
                        <i class="el-icon-search"></i>
                    </el-button> -->
                  </template>
                </vxe-column>
                <vxe-column
                    field="ggxh"
                    title="规格型号"
                    :edit-render="{}"
                    width="80"
                >
                </vxe-column>
                <vxe-column
                    field="dw"
                    title="单位"
                    :edit-render="{}"
                    width="60"
                >
                </vxe-column>
                <vxe-column
                    field="sl"
                    title="数量"
                    :edit-render="{}"
                    width="100"
                >
                </vxe-column>
                <vxe-column
                    field="bhsdj"
                    title="单价(不含税)"
                    :edit-render="{}"
                    key="bhsdj"
                    width="120"
                >
                </vxe-column>
                <vxe-column
                    field="bhsje"
                    title="金额(不含税)"
                    :edit-render="{}"
                    key="b"
                    width="120"
                >
                </vxe-column>
                <vxe-column
                    field="slv"
                    title="税率/征收率"
                    width="120"
                    type="html"
                    :edit-render="{}"
                >
                  <template v-slot="{ row, rowIndex }">
                    <div>
                      <span>{{ addDW(row.slv) }}</span>
                      <!-- <i
                          v-show="
                              (row.slv ||
                                  row.slv === 0) &&
                              (infoFormData.cezslxdm !=
                                  '02' ||
                                  (tableData[rowIndex] &&
                                      tableData[rowIndex]
                                          .kce))
                          "
                          class="el-icon-edit"
                          style="
                              cursor: pointer;
                              width: 16px;
                              height: 16px;
                              font-size: 16px !important;
                              margin-left: 3px;
                          "
                          :style="{
                              color:
                                  row.slv || row.slv == 0
                                      ? '#606266'
                                      : 'red',
                          }"
                          @click="changeRate(row)"
                      ></i> -->
                    </div>
                  </template>
                </vxe-column>
                <vxe-column field="se" title="税额" width="80">
                  <template #edit="{ row }">
                    <vxe-input
                        v-model="row.se"
                        type="text"
                    ></vxe-input>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>
          <div class="box6">价税合计（大写）</div>
          <div class="box7">
            <vxe-button
                status="primary"
                type="text"
                icon="fa fa-times-circle-o"
                style="flex: 1; color: #222; text-align: left"
            >
              {{
                infoFormData.jshjText
              }}
            </vxe-button>
            <span class="total-tit">（小写）</span>
            <div class="total-val">
              ￥{{
              infoFormData.jshj
              }}
            </div>
          </div>
          <div class="box8"><span class="bar-tit">备注</span></div>
          <div class="box9">
            <vxe-textarea
                v-model="infoFormData.bz"
                :placeholder="from == 'look' ? '' : '请输入'"
                class="text-area"
                resize="none"
                style="color: #bb8c91; border: none; height: 100%"
                maxlength="450"
            ></vxe-textarea>
          </div>
          <div class="man-area">
            <span class="man-input">开票人：</span>
            <vxe-input
                v-model="disabledEditForm.kpr"
                maxlength="300"
                :disabled="true"
            ></vxe-input>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">
                    取消
                </el-button>
                <el-button size="small" type="primary" @click="OpenInvoice">
                    开票
                </el-button>
            </span>
    </el-dialog>
    <searchPurchaseDialog v-model="searchPurchaseDialogShow" @change="purchaseCallback"></searchPurchaseDialog>
  </div>
</template>
<script>
import {extendVar} from '@/mixin/extendMixin.js'
import searchPurchaseDialog from './searchPurchaseDialog.vue'
import {invoiceByTransactionFlow} from "@/api/transactionFlowInvoice";

export default {
  props: {
    invoicingSpectShow: {
      type: Boolean,
      default: false,
    },
    invoicingPlainShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchPurchaseDialogShow: false,
      totalbhsN: 0, //
      totalhsN: 0, //
      seN: 0,
      from: 'edit',

      ifShowInfo: false, //
      // 完成
      extendFormData: {
        zzsjzjtdm: '', //
        sgfplxdm: '', //
        ckywsyzcdm: '', //
        gmfdz: '', //
        gmfdh: '', //
        gmfzh: '', //
        gmfkhh: '', //
        gmfjbr: '', //
        jbrsfzjhm: '', //
        gmfjbrlxdh: '', //

        xsfdz: '', //
        xsfdh: '', //
        xsfzh: '', //
        xsfkhh: '', //

        skyhmc: '', //
        skyhzh: '', //
        jsfs: '', //
        kprzjhm: '', //
        kprzjlx: '', //

        qydm: '', //
        ysxwfsd: '', //
      },
      infoFormData: {
        jems: '01',
        cezslxdm: '',
        gmfsfwzrr: '02',
        dhlx: '',
        dh: '',
        tdys: '',

        gmfmc: '',
        gmfnsrsbh: '',

        gmfdz: '',
        gmfdh: '',
        gmfkhh: '',
        gmfzh: '',
        gmfjbr: '',
        jbrsfzjhm: '',
        gmfjbrlxdh: '',
        xsfdz: '',
        xsfdh: '',
        xsfkhh: '', //
        xsfzh: '', //
        skyhmc: '',
        skyhzh: '', //
        jsfs: '', //
        kprzjhm: '', //
        qyDm: '', //

        xsfmc: '', //
        bz: '', //
      },
      disabledEditForm: {
        xsfmc: '',
        xsfdz: '',
        xsfdh: '',
        xsfnsrsbh: '',
        xsfzh: '',
        xsfkhh: '',
        qydm: '',
        hydm: '',
        kpr: '',
      },
      fjysList: [],
      tableData: [],

      dialogController: false
    }
  },
  computed: {
    // dialogShow() {
    //
    //   return this.invoicingPlainShow || this.invoicingSpectShow
    // },
  },
  watch: {
    invoicingPlainShow(newV) {
      if (newV) {
        this.getInvoice()
      }
    },
    invoicingSpectShow(newV) {
      if (newV) {
        this.getInvoice()
      }
    },
  },
  created() {

  },
  methods: {
    getInvoice() {
      this.resetData();
      this.infoFormData.fppz = this.invoicingSpectShow ? '01' : '02';
      this.$store.dispatch("flowInvoice/getInvoiceByTransactionId").then(data => {
        if (data) {
          this.dialogController = true
          this.detailCopy(data)
        } else {
          this.handleClose()
        }
      })
    },
    detailCopy(d) {
      this.infoFormData = d.vmsManualBaseVo;
      this.infoFormData.gmfsfwzrr = d.vmsManualExtendVo.gmfzrrbz;


      let jems = '01'; // 01不含税 02含税
      this.tableData = d.vmsManualDetailVoList.map(voi => {
        return {
          ...voi,
          bhsdj: jems == '01' ? voi.dj : voi.je / (1 + voi.slv) / voi.hsdj / (1 + voi.slv),
          bhsje: jems == '01' ? voi.je : voi.je / (1 + voi.slv),
          hsdj: voi.hsdj,
          hsje: jems == '02' ? voi.je : voi.je * (1 + voi.slv),
        }
      })
      this.extendFormData = d.vmsManualExtendVo
      this.fjysList = d.vmsManualAddVoList || []
      this.maxId = d.length;

      this.disabledEditForm = {
        "xsfdz": d.vmsManualExtendVo.xsfdz,
        "xsfzh": d.vmsManualExtendVo.xsfzh,
        "xsfkhh": d.vmsManualExtendVo.xsfkhh,
        "xsfdh": d.vmsManualExtendVo.xsfdh,
        "qydm": d.vmsManualExtendVo.qydm,
        "xsfmc": d.vmsManualBaseVo.xsfmc,
        "xsfnsrsbh": d.vmsManualBaseVo.xsfnsrsbh,
        "hydm": d.vmsManualBaseVo.hydm,
        "kpr": d.vmsManualBaseVo.kpr,
      }

    },
    resetData() {
      // 整体表单
      this.infoFormData = {
        jems: '01', //
        cezslxdm: '', //
        gmfsfwzrr: '02', //
        dhlx: '', //
        dh: '', //
        tdys: '', //

        gmfmc: '', //
        gmfnsrsbh: '', ///

        // xsfmc: //
        // xsfnsrsbh: '',
        fppz: this.$store.state.invoice2.busData.fppz,


        gmfdz: '', //
        gmfdh: '', //
        gmfkhh: '', //
        gmfzh: '', //
        gmfjbr: '', //
        jbrsfzjhm: '', //
        gmfjbrlxdh: '', //
        xsfdz: '', //
        xsfdh: '', //
        xsfkhh: '', //
        xsfzh: '', //
        skyhmc: '', //
        skyhzh: '', //
        jsfs: '', //
        kprzjhm: '', //
        qyDm: '', //

        xsfmc: '', //
        bz: '', //
      }
      this.extendFormData = {
        "zzsjzjtdm": "", //
        "sgfplxdm": "",//
        "ckywsyzcdm": "",//
        "gmfdz": "", //
        "gmfdh": "", //
        "gmfzh": "", //
        "gmfkhh": "", //
        "gmfjbr": "", //
        "jbrsfzjhm": "",  //
        "gmfjbrlxdh": "",//

        "xsfdz": "", //
        "xsfdh": "", //
        "xsfzh": "", //
        "xsfkhh": "", //

        "skyhmc": "", //
        "skyhzh": "", //
        "jsfs": "",//
        "kprzjhm": "",//
        "kprzjlx": "", //

        "qydm": "", //
        "ysxwfsd": "", //

      }

      this.fjysList = []
      this.tableData = []


      this.delRows = []
      this.billCode = ''; //
      this.maxId = 0 //
      this.curRowIndex = -1 //
      this.selectedRow = []
      this.amountDisabled = false
      this.rateTypeArr = []
      this.ifShowInfo = false
      this.totalbhsN = 0
      this.totalhsN = 0
      this.totalbhs = 0
      this.totalhs = 0
      this.totalbhsStr = ''
      this.totalhsStr = ''
      this.seN = 0
    },
    showInvoiceName() {
      // alert('弹框,搜索开票名称')
      this.searchPurchaseDialogShow = true
    },
    purchaseCallback(isShow, val) {
      this.searchPurchaseDialogShow = isShow;
      // 这个值需要回显到开具发票弹框页面
      this.infoFormData.gmfmc = val.kpmc
      this.infoFormData.gmfnsrsbh = val.kprnsrsbh
      this.extendFormData.gmfdz = val.gmfdz
      this.extendFormData.gmfdh = val.gmfdh
      this.extendFormData.gmfzh = val.gmfzh
      this.extendFormData.gmfkhh = val.gmfkhh
    },
    handleClose() {
      this.dialogController = false
      this.$emit('invoicingShow', false)
    },
    async OpenInvoice() {
      // 校验专票纳税人是否为空
      if (this.invoicingSpectShow && !this.infoFormData.gmfnsrsbh) {
        this.$message({
          message: '纳税人识别号不能为空',
          type: 'warning'
        })
        return
      }


      const vmsManualDetailDto = []
      this.tableData.map(item => {
        let temp = {
          id: item.id,
          xmmc: item.xmmc
        }
        vmsManualDetailDto.push(temp)
      })

      const params = {
        "vmsManualDetailDto": vmsManualDetailDto,
        "vmsManualBaseDto": {...this.infoFormData, fppz: this.invoicingSpectShow ? '01' : '02'},
        "extendFormData": {...this.extendFormData}
      }
      const {data, msg, code} = await invoiceByTransactionFlow(params);
      if (code == 200) {
        this.$message.success(data)
        this.handleClose()
      }
    },
    showInfo() {
      this.ifShowInfo = true
    },
    hideInfo() {
      this.ifShowInfo = false
    },
    addDW(val) {
      if ((val != '' && val != null && val != undefined) || (val === 0)) {
        try {
          val = val * 100 + '%';
          return (val)
        } catch (error) {

        }
      }
      return val
    },
    activeRowMethod({row, rowIndex}) {
      let r = false
      return r
    },
    rowClassName({row}) {
      return 'row'
    },
    tableCellStyle({row, column, rowIndex, columnIndex}) {
      let rowStyle = {}
      if (
          (columnIndex == 1 ||
              columnIndex == 2 ||
              columnIndex == 3 ||
              columnIndex == 4 ||
              columnIndex == 5 ||
              columnIndex == 6 ||
              columnIndex == 7) &&
          this.from != 'look' &&
          this.from != 'red'
      ) {
        rowStyle = {
          background: '#e6f7f7',
          border: '1px solid #dcdfe6',
          'border-left': 'none',
        }
      } else if (
          columnIndex == 0 &&
          this.from != 'red' &&
          this.from != 'look'
      ) {
        rowStyle.background = '#fff'
        rowStyle = {
          background: '#fff',
          'border-right': '1px solid #dcdfe6',
        }
      } else {
        rowStyle = {
          background: '#EEEEEE',
          border: '1px solid #dcdfe6',
          'border-left': 'none',
        }
      }
      return rowStyle
    },
    footerCellClassName({$rowIndex, column, columnIndex}) {
      if (columnIndex === 0) {
        if ($rowIndex === 0) {
          return 'col-red'
        } else {
          return ''
        }
      }
    },
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      let n = count.toFixed(2)
      let n1 = Number(n).toLocaleString()
      let obj = {
        number: Number(n),
        numberStr: n1,
      }
      if (
          Number.isNaN(obj.number) ||
          obj.number === 'NaN' ||
          obj.numberStr === '0.00'
      ) {
        obj.number = 0
      }
      if (
          Number.isNaN(obj.numberStr) ||
          obj.numberStr === 'NaN' ||
          obj.numberStr === '0.00'
      ) {
        obj.numberStr = 0
      }
      return obj
    },
    footerMethod({columns, data}) {
      let k = this
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '合计'
          }
          if (['bhsje', 'hsje', 'se'].includes(column.property)) {
            let tmp = this.sumNum(data, column.property)

            let tmpNumber = tmp.numberStr

            if (column.property == 'hsje') {
              k.totalhs = tmpNumber
              k.totalhsN = tmp.number
            }
            if (column.property == 'bhsje') {
              k.totalbhs = tmpNumber
              k.totalbhsN = tmp.number
            }
            if (column.property == 'se') {
              k.seN = tmp.number
            }

            return tmp.numberStr
          }
          return null
        }),
      ]
      return footerData
    },
    editActivedEvent({rowIndex, row}) {
      this.amountDisabled = row.rowStatus === 'newRow'
    },
    selectChangeEvent({row, rowIndex, checked}) {
      if (row.rowStatus == 'newRow') {
        return
      }
      if (checked) {
        this.selectedRow.push(rowIndex)
      } else {
      }
    },
    cellClickEvent({row, rowIndex}) {
      this.curRowIndex = rowIndex
    },
    changeMoneyToChinese(money, currencyunit) {
      if (currencyunit == '万元' || currencyunit == '万元/亩') {
        money = (money * 10000).toFixed(6)
      }
      let cnNums = ['零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖']
      let cnIntRadice = ['', '拾', '佰', '仟'] //
      let cnIntUnits = ['', '万', '亿', '兆'] //
      let cnDecUnits = ['角', '分', '毫', '厘'] //
      let cnInteger = '整' //
      let cnIntLast = '元' //
      let IntegerNum //
      let DecimalNum //
      let DecimalStr = '' //
      // end
      let ChineseStr = '' //

      let parts //

      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger
        if (currencyunit == '万元/亩') {
          ChineseStr = ChineseStr + '每亩'
        }
        return ChineseStr
      }
      money = money.toString() //
      if (money.indexOf('.') == -1) {
        IntegerNum = money
        DecimalNum = ''
      } else {
        parts = money.split('.')
        IntegerNum = parts[0]
        DecimalNum = parts[1].substr(0, 4)
      }
      if (parseInt(IntegerNum, 10) > 0) {
        let zeroCount = 0
        let IntLen = IntegerNum.length
        let n, p, q, m, i
        for (i = 0; i < IntLen; i++) {
          n = IntegerNum.substr(i, 1)
          p = IntLen - i - 1
          q = p / 4
          m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0]
            }
            zeroCount = 0 // 归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q]
          }
        }
        ChineseStr += cnIntLast
      }

      if (DecimalNum != '') {
        let decLen = DecimalNum.length
        let n, i
        for (i = 0; i < decLen; i++) {
          n = DecimalNum.substr(i, 1)
          if (n != '0') {
            DecimalStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }

      if (DecimalStr == '') {
        ChineseStr += cnInteger
      } else {
        ChineseStr += DecimalStr
      }
      // end

      if (ChineseStr == '') {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger
      }
      if (currencyunit == '万元/亩') {
        ChineseStr = ChineseStr + '每亩'
      }
      return ChineseStr
    },
  },
  mixins: [extendVar],
  components: {
    searchPurchaseDialog
  }
}
</script>

<style lang="scss" scoped>
.flowDialog {
  :v-deep .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
    padding: 0;
  }

  input::-ms-clear {
    width: 0;
    height: 0;
  }

  .invoice-area {
    position: relative;
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .box1 {
    width: 28px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box2 {
    width: 420px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    color: #bb8c91;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .box3 {
    width: 28px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box4 {
    width: 420px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .box5 {
    width: 896px;
    height: 262px;
    min-height: 190px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-top: none;
    border-bottom: none;
  }

  .box6 {
    width: 240px;
    height: 32.2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    color: #bb8c91;
    text-align: center;
    line-height: 32.2px;
  }

  .box7 {
    width: 656px;
    height: 32.2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #bb8c91;
  }

  .box8 {
    width: 28px;
    height: 73.5px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bb8c91;
  }

  .box9 {
    width: 868px;
    height: 73.5px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-top: none;
    color: #bb8c91;
    overflow-y: auto;
  }

  .bar-tit {
    width: 20px;
    display: inline-block;
    text-align: center;
  }

  .flex-invoice {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0px;
    width: 400px;
  }

  .input {
    flex: 1;
  }

  .invoice-area .vxe-table--header-wrapper,
  .invoice-area .vxe-header--row,
  .invoice-area .vxe-table--header {
    background-color: #fff;
    color: #bb8c91;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
  }

  .invoice-area .vxe-table--render-default .vxe-cell {
    font-size: 12px;
    font-weight: normal;
    text-align: center;
  }

  .row {
    box-sizing: border-box;
    height: 24.5px;
    display: inline-block;
    line-height: 24.5px;
    margin-bottom: 5px;
  }

  .invoice-area
  .vxe-table--render-default.vxe-editable.size--mini
  .vxe-body--column,
  .invoice-area
  .vxe-table--render-default.size--mini
  .vxe-header--column.col--ellipsis,
  .invoice-area
  .vxe-table--render-default.size--mini
  .vxe-body--column.col--ellipsis,
  .invoice-area
  .vxe-table--render-default.size--mini
  .vxe-footer--column.col--ellipsis {
    height: 24.5px;
    line-height: 24.5px;
  }

  .table-area-invoice {
    padding-left: 10px;
    height: 240px;
    overflow: auto;
    min-height: 160px;
    position: relative;
  }

  .col-red {
    color: #bb8c91;
  }

  .total-tit {
    color: #bb8c91;
  }

  .total-val {
    color: #bb8c91;
    display: inline-block;
    width: 40%;
  }

  .remark {
    padding: 10px;
    display: inline-block;
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .red {
    color: #ea0000;
  }

  .info {
    width: 900px;
    margin: 0 auto 8px;
    // margin-bottom: 8px;
    .info-top {
      display: flex;
      justify-content: space-between;
      align-items: start;

      .info-top-l {
        min-width: 600px;
      }

      .info-top-r {
        float: right;
      }
    }
  }

  .radio-tit {
    font-weight: bold;
  }

  .radio-item {
    margin-right: 20px;
    cursor: pointer;
  }

  .radio-icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
  }

  .box9 textarea {
    width: 100%;
    height: 100%;
    color: #bb8c91;
    border: none;
  }

  .man-area {
    margin-top: 12px;
    // margin-left: 60px;
  }

  .man-input {
    color: #bb8c91;
  }

  .add-fj {
    margin-right: 15px;
    cursor: pointer;
    color: #68d3cd;
  }

  .del-fj {
    cursor: pointer;
    color: #68d3cd;
  }

  .fj-area {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .form-tit {
    height: 14px;
    border-left: 3px solid #07b9b9;
    color: #1a1a1a;
    font-size: 12px;
    line-height: 14px;
    padding-left: 8px;
    font-weight: bold;
    width: 600px;
  }

  ::v-deep .el-dialog__body {
    padding: 0 10px;
  }

  // :deep .vxe-modal--wrapper .vxe-modal--box {
  //     overflow: auto;
  // }
  // :deep .vxe-modal--box {
  //     overflow: auto;
  // }
}

.flex-app-continer1 {

}

::v-deep .el-dialog__footer {
  text-align: center;
}
</style>